<template>
    <div class="scroll-tag-container" :style="[{'backgroundColor': containerBgColor}, {'margin': verticalPadding + 'px ' + horizontalPadding + 'px'}, {'width': width + '%'}]">
        <div class="scroll-wrapper" :style="{ animationDuration: scrollSpeed + 's' }">
            <div class="tag-item" v-for="(tag, index) in tags" :key="index" 
                :style="[
                    {'backgroundColor': tagBgColor},  
                    {'color': tagTextColor},          
                    {'borderRadius': tagRadius + 'px'}, 
                    {'fontSize': tagSize + 'px'},     
                    {'padding': tagPadding + 'px ' + tagHoriPadding + 'px'} 
                ]">
                {{ tag }}
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'card_tag',
    cname: '滚动标签',
    configName: 'c_card_tag',
    icon: 'iconxinwenbobao2',
    type: 3,
    defaultName: 'cardTag',
    props: {
        index: { type: null },
        num: { type: null }
    },
    computed: {
        ...mapState('mobildConfig', ['defaultArray'])
    },
    watch: {
        pageData: {
            handler(nVal) {
                this.setConfig(nVal)
            },
            deep: true
        },
        num(nVal) {
            const data = this.defaultArray[nVal]
            this.setConfig(data)
        },
        'defaultArray': {
            handler() {
                const data = this.defaultArray[this.num]
                this.setConfig(data)
            },
            deep: true
        },
        defaultConfig: {
            handler(nVal) {
                this.setConfig(nVal)
            },
            deep: true
        }
    },
    data() {
        return {
            defaultConfig: {
            name: 'cardTag',
            timestamp: this.num,
            setUp: {
                tabVal: '0'
            },
            // 内容设置
            tagList: {
                title: '标签内容',
                value: '热点标签1,热点标签2,热点标签3,热点标签4,热点标签5',
                place: '请输入标签，用逗号分隔'
            },
            scrollSpeed: {
                title: '滚动速度',
                val: 15,
                min: 5,
                max: 30
            },
            // 样式设置
            // 标签样式
            tagRadius: {
                title: '标签圆角',
                val: 20,
                min: 0,
                max: 50
            },
            tagSize: {
                title: '标签大小',
                val: 14,
                min: 10,
                max: 24
            },
            tagTextColor: {
                title: '标签文字颜色',
                default: [{ item: '#FFFFFF' }],
                color: [{ item: '#FFFFFF' }]
            },
            tagBgColor: {
                title: '标签背景色',
                default: [{ item: '#3D8EF9' }],
                color:[{ item: '#3D8EF9' }]
            },
            tagPadding: {
                title: '标签上下内边距',
                val: 5,
                min: 0,
                max: 20
            },
            tagHoriPadding: {
                title: '标签左右内边距',
                val: 15,
                min: 0,
                max: 30
            },
            // 容器样式
            containerBgColor: {
                title: '整体背景色',
                default: [{ item: 'transparent' }],
                color: [{ item: 'transparent' }]
            },
            width: {
                title: '页面宽度',
                val: 100,
                min: 50,
                max: 100,
                unit: '%'
            },
            verticalPadding: {
                title: '上下间距',
                val: 10,
                min: 0,
                max: 50
            },
            horizontalPadding: {
                title: '左右间距',
                val: 10,
                min: 0,
                max: 50
            }
            },
            pageData: {},
            tags: [],
            scrollSpeed: 15,
            // 标签样式
            tagRadius: 20,
            tagSize: 14,
            tagTextColor: '#FFFFFF',
            tagBgColor: '#3D8EF9',
            tagPadding: 5,
            tagHoriPadding: 15,
            // 容器样式
            containerBgColor: 'transparent',
            width: 100,
            verticalPadding: 10,
            horizontalPadding: 10
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.pageData = this.defaultArray[this.num] || this.defaultConfig
            this.setConfig(this.pageData)
        })
    },
    methods: {
        setConfig(data) {
            if (!data) return
            
            // 处理内容设置
            this.tags = data.tagList.value.split(',')
            this.scrollSpeed =  data.scrollSpeed.val || 15
            
            // 处理样式设置
            // 标签样式
            this.tagRadius =  data.tagRadius.val || 20
            this.tagSize =  data.tagSize.val || 14
            this.tagTextColor =  data.tagTextColor.color[0].item || '#FFFFFF'
            this.tagBgColor =  data.tagBgColor.color[0].item || '#3D8EF9'
            this.tagPadding =  data.tagPadding.val || 5
            this.tagHoriPadding =  data.tagHoriPadding.val || 15
            
            // 容器样式
            this.containerBgColor =  data.containerBgColor.color[0].item || 'transparent'
            this.width = data.width.val || 100
            this.verticalPadding =  data.verticalPadding.val || 10
            this.horizontalPadding = data.horizontalPadding.val || 10
        }
    }
}
</script>

<style scoped lang="scss">
.scroll-tag-container {
    width: 100%;
    overflow: hidden;
    .spacing-preview {
        width: 100%;
    }
    .scroll-wrapper {
        display: flex;
        white-space: nowrap;
        align-items: center;
        animation: scrollLeft linear infinite;
        .tag-item {
            display: inline-block;
            margin: 0 10px;

            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
    }
}

@keyframes scrollLeft {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
</style>